<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: caixianfeng
 * @Date: 2021-07-13 11:09:58
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-15 16:31:59
-->
<template>
  <div>
    <!-- 头部 -->
    <Head />
    <HeadImg />
    <!-- /头部 -->
    <!-- 内容区 -->
    <div class="main">
      <articleHead>
        <span slot="text"> </span>
      </articleHead>
      <div class="content">
        <div class="title">{{ article.title }}</div>
        <p>
          <span
            >作者：{{ article.baseUser ? article.baseUser.realname : "" }}</span
          >
          <span>来源：{{ article.category ? article.category.name : "" }}</span>
          <span>时间：{{ article.publishTime | fmtDate }}</span>
          <span>浏览：{{ article.readTimes ? article.readTimes : "" }}</span>
        </p>
        <div class="main-content"><div v-html="article.content"></div></div>
      </div>
    </div>
    <!-- /内容区 -->
    <!--底部-->
    <Footer />
    <!--/底部-->
  </div>
</template>
<script>
import { get } from "../utils/request";
import Head from "./components/Head.vue";
import ArticleHead from "./components/articleHead";
import Footer from "./components/Footer";
import HeadImg from "./components/Head_img";
export default {
  components: { Head, ArticleHead, Footer, HeadImg },
  data() {
    return {
      id: "",
      article: {},
    };
  },
  methods: {
    loadArticle() {
      let url = "/index/article/findById";
      get(url, { id: this.id }).then((resp) => {
        this.article = resp.data;
        this.$bus.$emit('article',article)
      });
    },
  },
  created() {
    this.id = this.$route.query.id;
    if (this.id) {
      this.loadArticle();
    }
  },
};
</script>
<style scoped>
.main {
  min-height: calc(100vh - 219px);
}
.content {
  width: 75%;
  margin: 0 auto;
  padding: 1em 0;
}
.content > .title {
  text-align: center;
  font-size: 24px;
  font-weight: bolder;
  line-height: 1.6em;
  color: #333;
  font-family: "Microsoft YaHei";
}
.content p {
  margin-top: 6px;
  width: 100%;
  font-style: normal;
  float: left;
  display: block;
  font-size: 1.6em;
  line-height: 1.6em;
  color: #666;
  text-align: center;
}
.content span {
  margin-right: 22px;
}
.main-content {
  font-size: 16px;
  line-height: 1.6em;
  text-indent: 2em;
  color: #333;
  text-align: center;
  font-family: "Microsoft YaHei";
}
</style>
